<!--
 * @Author: wangshiyang
 * @Date: 2023-06-15 16:50:08
 * @LastEditors: wangshiyang
 * @LastEditTime: 2023-06-16 16:07:45
 * @Description: 请填写简介
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>
    <script src='https://unpkg.com/@antv/l7'></script>
    <script src='https://lib.baomitu.com/jquery/2.2.4/jquery.js'></script>
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js'></script>
    <script src="http://aesqe.github.io/mapboxgl-minimap/mapboxgl-control-minimap.js"></script>
    <script
        src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
    <link rel="stylesheet"
        href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css"
        type="text/css">
    <style>
        html,
        body {
            overflow: hidden;
            margin: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100vw;
            height: 100vh;
        }

        #mouse-position {
            position: fixed;
            bottom: 10px;
            left: 50%;
            z-index: 100;
        }

        #select {
            position: absolute;
            z-index: 100;
            margin-left: 60px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <select id="select">

    </select>
    <div id="map">

        <div id="mouse-position">
        </div>
    </div>
    <script src="./adCode.js"></script>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdiZW5jaGFvIiwiYSI6ImNsODU3aGRiODA0Y2UzcHBzZmFlcmdqZ2sifQ.8k59W_pB_Riwe6o-MneRlA'
        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                style: 'mapbox://styles/mapbox/streets-v11',
                center: [114, 30],
                zoom: 12,
                projection: 'globe'
            })
        });

        const map = scene.map;
        map.on('load', () => {
            // geolocate.trigger();
            const geolocation = navigator.geolocation;
            geolocation.getCurrentPosition(res => {
                let { longitude, latitude } = res.coords;
                let center = [longitude, latitude]
                var marker = new mapboxgl.Marker({
                    draggable: true
                }).setLngLat(center)
                map.flyTo({
                    center
                })
                marker.addTo(map);
            })
            $(".l7-control-logo").html("中地数码集团/新中地教育")

        });

        const nav = new mapboxgl.NavigationControl(
        );
        //1、全屏控件
        map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
        /* 2、导航 */
        //添加导航控件，控件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-right'四种，默认为'top-right'
        map.addControl(nav, 'top-left');
        /* 3、比例尺 */
        const scale = new mapboxgl.ScaleControl({
        })
        map.addControl(scale, 'bottom-right');
        // 5.汉化控件
        map.addControl(new MapboxLanguage({
            defaultLanguage: 'zh-Hans'  // 设置默认语言
        }))
        // 6.鹰眼控件
        map.addControl(new mapboxgl.Minimap({
            center: [114, 30],
            zoom: 6,
            zoomLevels: []
        }), 'top-right');
        // 7.鼠标控件
        map.on('mousemove', function (e) {
            const { lng, lat } = e.lngLat;
            document.getElementById('mouse-position').innerHTML = `
   经度:${lng.toFixed(2)},纬度:${lat.toFixed(2)}
  `
        });
        // 8.属性控件
        map.addControl(new mapboxgl.AttributionControl({
            //是否折叠属性信息
            compact: true,
            //自定义属性信息
            customAttribution: ["中地数码", "GIS高校论坛"]
        }));
        console.log(dataSource);
        const select = document.getElementById('select')
        dataSource.forEach(item => {
            const newItem = document.createElement('option')
            newItem.value = item.adcode
            newItem.innerText = item.name
            select.appendChild(newItem)
        })

        select.onchange = (e) => {
            console.log(e);
            console.log(e.target.value);
            getData(e.target.value)
        }

        let lastLayers = []
        const labels = []

        const getData = (adcode) => {
            lastLayers.length && lastLayers.forEach(item => {
                map.removeLayer(item)
            })
            labels.length && labels.forEach(item => {
                item.remove()
            })
            lastLayers.length = 0
            const queryUrl = `https://geo.datav.aliyun.com/areas_v3/bound/${adcode}.json`
            $.ajax({
                url: queryUrl
            }).then(res => {
                console.log(res);
                lastLayers.push(adcode)
                map.addLayer({
                    id: adcode,
                    type: "fill",
                    source: {
                        type: "geojson",
                        data: res
                    },
                    /* 绘制地图的样式 */
                    paint: {
                        'fill-color': "#ff2d51",
                        'fill-opacity': 0.5
                    }
                })
                const { features } = res
                const { properties: { center } } = features[0]
                map.flyTo({
                    //飞行的中心点
                    center: center,
                    //飞行之后地图的放大级别
                    zoom: 13,
                    //控制飞行的速度
                    speed: 0.8,
                    /* 俯仰角0-90 */
                    pitch: 20
                })
                let marker = new mapboxgl.Marker({
                    draggable: false,
                }).setLngLat(center);
                labels.push(marker);
                marker.addTo(map);
            })
        }
    </script>
</body>

</html>